<template>
  <BaseText class="base-time">
    <slot name="before"></slot>
    <slot name="icon">
      <van-icon v-if="showIcon" class="base-time__icon" :name="showIcon" />
    </slot>
    <span>{{ timeText }}</span>
    <slot name="after">
      <span v-if="isToSale">开售</span>
    </slot>
  </BaseText>
</template>

<script setup>
import { computed } from "vue";
import { formatTime } from "@/utils/timeUtils.js";
import timeIcon from "@/assets/icon/time.svg";
import timeAIcon from "@/assets/icon/time-a.svg";

let props = defineProps({
  time: [String, Date, Number],

  // time, date, dateTime, toSale, 普通格式化格式
  format: {
    type: String,
    default: "dateTime",
  },

  icon: {
    type: [String, Boolean],
    default: "",
  },

  endOf: String, // 配置时间到哪一段结束 主要用于不展示秒
  isPrimary: Boolean,
});

let timeText = computed(() => {
  return formatTime(props.time, props.format, { endOf: props.endOf });
});

let isToSale = computed(() => {
  return props.format === "toSale";
});

let showIcon = computed(() => {
  let icon = props.icon;

  if (
    icon === "time" ||
    icon === true ||
    (!icon && icon !== false && isToSale.value)
  ) {
    icon = props.isPrimary ? timeAIcon : timeIcon;
  }

  return icon;
});
</script>

<style lang="scss" scoped>
.base-time {
  display: inline-flex;
  align-items: center;

  &__icon {
    font-size: 1.1em;
    margin-right: calc(var(--dx-size-gap-xs) / 2);

    &:not(:first-child) {
      margin-left: calc(var(--dx-size-gap-xs) / 2);
    }
  }
}
</style>
